{% extends  'base/front_base.html' %}
{% load news_filter %}
{% block title %}
首页
{% endblock %}

{% block link %}
  <link rel="stylesheet" href=" {% static 'css/news/index.css' %} ">
{% endblock %}

{% block main %}
<!-- main start -->
<main id="main">
  <div class="w1200 clearfix">
    <!-- main-contain start  -->
    <div class="main-contain">
      <!-- banner start -->
      <div class="banner">
        <ul class="pic">
          <li style="display:block;"><a href="javascript:void(0);"><img
                  src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg" alt="test"></a></li>
          <li><a href="javascript:void(0);"><img
                  src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg" alt="test"></a></li>
          <li><a href="javascript:void(0);"><img
                  src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg" alt="test"></a></li>
          <li><a href="javascript:void(0);"><img
                  src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg" alt="test"></a></li>
        </ul>
        <a href="javascript:void(0);" class="btn prev">
          <i class="PyWhich py-arrow-left"></i></a>
        <a href="javascript:void(0);" class="btn next">
          <i class="PyWhich py-arrow-right"></i></a>
        <ul class="tab">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- banner end -->
      <!-- content start -->
      <div class="content">
        <!-- recommend-news start -->
        <ul class="recommend-news">
          <li>
            <a href="javascript:void(0);" target="_blank">
              <div class="recommend-thumbnail">
                <img src="https://static-image.xfz.cn/1529218165_112.jpg-website.news.list" alt="title">
              </div>
              <p class="info">社交电商，终究还是逃不脱阿里的势力范围</p>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" target="_blank">
              <div class="recommend-thumbnail">
                <img src="https://static-image.xfz.cn/1529218165_112.jpg-website.news.list" alt="title">
              </div>
              <p class="info">社交电商，终究还是逃不脱阿里的势力范围</p>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" target="_blank">
              <div class="recommend-thumbnail">
                <img src="https://static-image.xfz.cn/1529218165_112.jpg-website.news.list" alt="title">
              </div>
              <p class="info">社交电商，终究还是逃不脱阿里的势力范围</p>
            </a>
          </li>
        </ul>
        <!-- recommend-news end -->
        <!--  news-nav start-->
        <nav class="news-nav">
          <ul class="clearfix">
            <li class="active"><a href="javascript:void(0)">最新资讯</a></li>
            {% for tag in tags %}
              <li><a href="javascript:void(0)" data-id="{{ tag.id }}">{{ tag.name }}</a></li>
            {% endfor %}
          </ul>
        </nav>
        <!--  news-nav end -->
        <!-- news-contain start -->
        <div class="news-contain">
          <ul class="news-list">
            {% for news in newses %}
              <li class="news-item">
              <a href="{% url 'news:news_detail' news_id=news.id %}" class="news-thumbnail" target="_blank">
                <img src="{{ news.thumbnail_url }}" alt="title" title="{{ news.title }}">
              </a>
              <div class="news-content">
                <h4 class="news-title"><a href="{% url 'news:news_detail' news_id=news.id %}">{{ news.title }}</a></h4>
                <p class="news-details">{{ news.desc }}</p>
                <div class="news-other">
                  <span class="news-type">{{ news.tag.name }}</span>
                  <span class="news-time">{{ news.pub_time|date_format}}</span>
                  <span class="news-author">{{ news.author.username }}</span>
                </div>
              </div>
            </li>
            {% endfor %}
          </ul>
        </div>
        <!-- news-contain end -->
        <!-- btn-more start -->
        <a href="javascript:void(0);" class="btn-more" data-page="2">加载更多</a>
        <!-- btn-more end -->
      </div>
      <!-- content end -->
    </div>
    <!-- main-contain  end -->
    {% include 'base/side.html' %}
  </div>
</main>
<!-- main end -->
{% endblock %}

{% block script %}
  <script src="/static/js/news/index.js"></script>
{% endblock %}

